第一次參加鐵人賽的你，先禮貌性來個自我介紹吧？！
嗨大家好！ This is Ian ， 24 歲身心理男。
Position ： RD —— web frontend engineer 。同時也是一名街舞舞者
高中開始了自己的街舞生涯，大學就算讀資工系也是不負眾望地把大一二讀成熱舞系資工社，大三因緣際會接觸了網頁工程後才挖掘出了我對於寫程式的興趣。
當時與身邊街舞圈以及系上的朋友籌組了前端讀書會，也在系上學長的介紹下加入了他們的新創公司，正式掛上了網頁工程師的 RD 頭銜。
目前在職場上闖蕩剛滿一年多，即便菜味濃郁，仍很慶幸自己依舊能保有對生活的熱情，上午盯著螢幕上 dark mode 的 vscode 燒腦，晚上仍有餘裕將我始終如一的興趣（Dance～）當作副業培養＆訓練自己。
現階段的技能樹點在前端居多，框架以 React 為主，對 Typescript 又愛又恨，打從心底尊敬能寫出鬼一般的 utility-types 的人，但對一切工程相關的事物都保有興趣，你可以把好奇心視作我的代名詞，活到老學到死是我的信仰。
自介以上，簡潔有力。
引發你寫這一系列文章的契機是什麼？因為疫情在家閒的發慌嗎？
嗯，對。
這就要讓我們把時光回朔到我還在學長的新創公司就職的時候了，公司當時主要是接案公司，專案都以React開發為主，只要是與網頁前端相關的事幾乎是圍繞著 React 運行。
老闆當時希望在接案之餘也能同時經營自家產品，而他構思出的第一個產品（我也不確定是不是第一個ＸＤ），就是一個協助網頁前端開發者建立 富文本編輯器 （ Rich Text Editor ），同時提供模組化的樣式與元件的 SaaS 服務，開發初期階段因為要提供給公司使用所以是 based on React 的。
當時是我第一次接觸 WYSIWYG ，好奇心使然去偷看了一下裡面的 source-code 彷彿看見新大陸，與自己平常用 React 拼貼排版樣式的 code 完全不同，滿滿的 dom 操作、監聽器處理、演算法計算，我整個人都驚呆了！然後就用非常徒法煉鋼的方式一行一行搞懂裡面的 code 自己去實作出了一個小份的，雖然功能很陽春但還是成就感滿滿。
後來公司新進了一位大神同事，老闆在面試時跟他描述了產品的構思後他就向大家介紹了 Slate.js 這個 open source library ，並建議產品的底層可以先直接依賴於 Slate 提供的服務，未來有必要時再抽換即可。
之後老闆就把產品的建立全權交給他負責了，我也因為在忙其他的專案沒有參與其中，對於 Slate 提供的服務也是一知半解，一直到我進了新公司，公司的產品又出現製作 Rich Text Editor 的需求後我才又回過頭來研究並使用 Slate 。
從官網的 document 開始，上網找了相關的介紹與解析文章卻總覺得不夠詳盡或者東缺西缺，最後到一點一點地翻找 source-code 裡各個功能的實現邏輯。越陷越深的我，最後終於決定為它產出一份完整的源碼解析文章，一方面完整自己的學習過程，另一方面也希望能為同樣漫遊其中的同道中人指出一盞明燈。
那我會從文章中學到些什麼呢？
首先我們會先將目光聚焦在整個網頁 富文本編輯器 （ Rich Text Editor ） 的演進過程，歷代的編輯器分別有哪些特色，它們又各自面臨了哪些問題，而目前市場上的趨勢我們也會一併納入考量。
接著到了 slate.js 的介紹篇章後當然是由淺入深，從完整理解 slate.js 的使用概念，到深入進 source code 裡，挖掘各功能是如何實現程式邏輯的。
同時在這樣的過程中學習作者的開發思維：
除了理解程式碼本身以外，我們也希望能夠理解程式碼背後的設計原因（畢竟厲害的工程師總是能夠換位思考嘛～
在對我本人以及對整個系列文章內容有了大致上的了解後，我們接著來聊聊形式層面：
首先，就像上面一樣，整篇系列文會穿插著問與答。
只要看到 Quote 就代表是提出問題的一方
如果提出的問題正好就是讀者想問的，歡迎留言告訴我！我會 ... 很開心 ＸＤ 。
斜體文字 代表是筆者留的小註釋。
粗體文字 代表會在之後的文章詳細做解釋。
如果有哪裡解釋不清楚或有誤的都歡迎留言指正與討論！
最後來附上 30 日的文章分類列表，咱們就明天見拉！
包含本篇，統整了一切進入 WYSIWYG 世界所應有的先備知識
你知道 Web WYSIWYG 有分世代嗎？
市場上形形色色的編輯器套件搞得開發者眼花撩亂，我們該如何快速理解它們並依照自己的需求做選擇呢？
答案就收錄在這個篇章裡
至此正式開始我們深入 slate 原始碼世界的旅程
最最最基本的入門門檻
當然要先從 slate 定義好的 Interfaces 開始介紹起！
你應該聽說過 Immutable 吧？沒聽過也沒關係
本章節會從頭探討一次 JS Immutable 的議題，再帶入到 slate 與它所選用的工具（ Immer.js ）之間的關係
slate Operation 大解密！
我們會盡可能地深入進 source code 裡探索 slate 究竟是如何實作出 Operation 的
你知道 Normalize （正規化）嗎？你知道 slate 也自備 Normalize 的功能嗎？
本章節一樣盡可能地深入進 source code 裡挖掘 slate Normalizing 的實作內容
筆者也準備了相關的流程圖，讓函式彼此間的關係與整個 slate 編輯器的運作流程更為清楚
最後章節以 reference 的形式呈現
為開發 slate 的迷途羔羊們指點迷津
iThome鐵人賽
看影片追技術